﻿<template>
  <div class="app-container" @drop="drop" @dragover.prevent>
    <div class="filter-title">
      <el-form label-position="right" label-width="110px">
        <el-form-item :label="$t('screen.name')+' :'">
          <el-input
            v-model="listQuery.name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('screen.name')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('screen.type')+' :'">
          <el-select
            v-model="listQuery.type"
            clearable
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('screen.type')"
          >
            <el-option
              v-for="item in screenTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.status')+' :'">
          <el-select
            v-model="listQuery.check_status"
            clearable
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.status')"
          >
            <el-option
              v-for="item in checkStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          style="margin-left:20px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t('table.search') }}</el-button>
        <el-button
          v-if="permission.add"
          style="margin-left: 10px;float:right"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >{{ $t('table.add') }}</el-button>
        <el-button
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          @click="handleRefresh"
        >{{ $t('table.refresh') }}</el-button>
      </el-form>
    </div>

    <div class="headAdd">
      <el-button
        v-for="item in sortList"
        :key="item.id"
        style="margin-left: 10px"
        class="filter-item"
        @click="locationFilter(item.id)"
      >{{ item.name }}</el-button>
      <span
        v-if="permission.addSort"
        style="margin-left: 10px;"
        class="filter-item"
        @click="handleEqTypeCreate"
      >
        <i class="el-icon-circle-plus-outline"></i>
      </span>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0.2)"
      border
      fit
      highlight-current-row
      style="width: 100%min-height:1000px"
    >
      <el-table-column fixed="left" align="center" :label="$t('table.id')" width="65">
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('screen.id')">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('screen.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('equipment.type')">
        <template slot-scope="scope">
          <span>{{ scope.row.equipment_type_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('screen.type')">
        <template slot-scope="scope">
          <span>{{ getScreenType(scope.row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('screen.videoRatio')">
        <template slot-scope="scope">
          <span>{{ scope.row.video_ratio }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('screen.pictureRatio')">
        <template slot-scope="scope">
          <span>{{ scope.row.picture_ratio }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('public.status')">
        <template slot-scope="scope">
          <span
            :class="statusColorSecond(scope.row.check_status)"
          >{{ statusEstimation(scope.row.check_status) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('table.actions')"
        :width="operWidth"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleRead(scope.row)"
          >{{ $t('table.read') }}</el-button>
          <el-button
            v-if="permission.update"
            type="primary"
            size="mini"
            :disabled="(scope.row.check_status ===1 || scope.row.check_status ===3)?false:true"
            @click="handleUpdate(scope.row)"
          >{{ $t('table.edit') }}</el-button>
          <el-button
            v-if="permission.review"
            type="primary"
            size="mini"
            :disabled="(scope.row.check_status ===1 || scope.row.check_status ===3)?false:true"
            @click="handleReview(scope.row)"
          >{{ $t('table.review') }}</el-button>

          <el-button
            v-if="permission.del"
            type="danger"
            size="mini"
            :disabled="(scope.row.check_status ===1 || scope.row.check_status ===3)?false:true"
            @click="handleModifyStatus(scope.row)"
          >{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <!-- 设备属性分类编辑 -->
    <el-dialog title="添加" :visible.sync="sortDataFormVisible">
      <el-form
        ref="sortDataForm"
        :rules="sortRules"
        :model="sortTemp"
        label-position="right"
        label-width="35%"
        style="width: 400px margin:auto"
        size="small"
      >
        <el-form-item :label="$t('equipment.type')+' :'" prop="name">
          <el-input v-model="sortTemp.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sortDataFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          type="primary"
          :disabled="createSortDisabled"
          @click="createSortData"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 设备属性编辑 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="950px">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="35%"
        style="width: 400px margin:auto"
        size="small"
      >
        <el-form-item v-if="dialogStatus==='review'" :label="$t('equipment.type')+' :'">
          <span>{{ equipmentTypeES(temp.equipment_type) }}</span>
        </el-form-item>
        <el-form-item v-else :label="$t('equipment.type')+' :'" prop="equipment_type">
          <el-select v-model="temp.equipment_type" placeholder="请选择">
            <el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='review'" :label="$t('screen.name')+' :'">
          <span>{{ temp.name }}</span>
        </el-form-item>
        <el-form-item v-else :label="$t('screen.name')+' :'" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='review'" :label="$t('screen.type')+' :'">
          <el-radio-group v-model="temp.type">
            <div v-if="temp.type === 1" class="screen_preview">
              <div class="first_screen">视频区</div>
              <el-radio :label="1" disabled>单屏</el-radio>
            </div>
            <div v-if="temp.type === 2" class="screen_preview">
              <div class="second_screen">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="2" disabled>双屏</el-radio>
            </div>
            <div v-if="temp.type === 3" class="screen_preview">
              <div class="third_preview">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="3" disabled>三屏</el-radio>
            </div>
            <div v-if="temp.type === 4" class="screen_preview">
              <div class="fourth_preview">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="4" disabled>四屏</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-else :label="$t('screen.type')+' :'" prop="type">
          <el-radio-group v-model="temp.type">
            <div class="screen_preview">
              <div class="first_screen">视频区</div>
              <el-radio :label="1">单屏</el-radio>
            </div>
            <div class="screen_preview">
              <div class="second_screen">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="2">双屏</el-radio>
            </div>
            <div class="screen_preview">
              <div class="third_preview">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="3">三屏</el-radio>
            </div>
            <div class="screen_preview">
              <div class="fourth_preview">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="4">四屏</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='review'" :label="$t('screen.videoRatio')+' :'">
          <span>{{ temp.video_ratio }}</span>
        </el-form-item>
        <el-form-item v-else :label="$t('screen.videoRatio')+' :'" prop="videoRatio">
          <el-input v-model="videoRatio" style="display:none"></el-input>
          <el-input-number v-model="video_ratio_width" :controls="false" :min="1" placeholder="宽"></el-input-number>&nbsp;:&nbsp;
          <el-input-number v-model="video_ratio_height" :controls="false" :min="1" placeholder="高"></el-input-number>
          <el-button
            v-if="videoRatio"
            type="primary"
            @click="previewVideoRatio"
          >{{ $t('table.preview') }}</el-button>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus==='review' && temp.video_px"
          :label="$t('screen.videoPx')+' :'"
          prop="video_px"
        >
          <span>{{ temp.video_px }}</span>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus!=='review'"
          :label="$t('screen.videoPx')+' :'"
          prop="video_px"
        >
          <el-input v-model="temp.video_px"></el-input>
        </el-form-item>
        <template v-if="dialogStatus==='review' && temp.type !== 1 && temp.type !== ''">
          <el-form-item :label="$t('screen.pictureRatio')+' :'">
            <span>{{ temp.picture_ratio }}</span>
          </el-form-item>
          <el-form-item v-if="temp.picture_px" :label="$t('screen.picturePx')+' :'">
            <span>{{ temp.picture_px }}</span>
          </el-form-item>
        </template>
        <template v-if="dialogStatus!=='review' && temp.type !== 1 && temp.type !== ''">
          <el-form-item :label="$t('screen.pictureRatio')+' :'" prop="pictureRatio">
            <el-input v-model="pictureRatio" style="display:none"></el-input>
            <el-input-number
              v-model="picture_ratio_width"
              :controls="false"
              :min="1"
              placeholder="宽"
            ></el-input-number>&nbsp;:&nbsp;
            <el-input-number
              v-model="picture_ratio_height"
              :controls="false"
              :min="1"
              placeholder="高"
            ></el-input-number>
            <el-button
              v-if="pictureRatio"
              type="primary"
              @click="previewPictureRatio"
            >{{ $t('table.preview') }}</el-button>
          </el-form-item>
          <el-form-item :label="$t('screen.picturePx')+' :'" prop="picture_px">
            <el-input v-model="temp.picture_px"></el-input>
          </el-form-item>
        </template>
        <el-form-item
          v-if="dialogStatus=='review'"
          :label="$t('public.status')+' :'"
          prop="check_status"
        >
          <el-radio-group v-model="temp.check_status">
            <el-radio :label="1" disabled>审核中</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus=='review' && temp.check_status === 3"
          :label="$t('public.auditOpinion')+' :'"
          prop="check_remark"
        >
          <el-input v-model="temp.check_remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          :disabled="createDisabled"
          @click="createData"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else-if="dialogStatus=='update'"
          type="primary"
          :disabled="updateDisabled"
          @click="updateData"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="reviewDisabled"
          @click="reviewData"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormRead">
      <el-form
        :model="temp"
        label-position="right"
        label-width="40%"
        style="width: 400px margin-left:120px"
      >
        <el-form-item :label="$t('equipment.type')+' :'">
          <span>{{ equipmentTypeES(temp.equipment_type) }}</span>
        </el-form-item>
        <el-form-item :label="$t('screen.name')+' :'">
          <span>{{ temp.name }}</span>
        </el-form-item>
        <el-form-item :label="$t('screen.type')+' :'">
          <el-radio-group v-model="temp.type">
            <div v-if="temp.type === 1" class="screen_preview">
              <div class="first_screen">视频区</div>
              <el-radio :label="1" disabled>单屏</el-radio>
            </div>
            <div v-if="temp.type === 2" class="screen_preview">
              <div class="second_screen">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="2" disabled>双屏</el-radio>
            </div>
            <div v-if="temp.type === 3" class="screen_preview">
              <div class="third_preview">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="3" disabled>三屏</el-radio>
            </div>
            <div v-if="temp.type === 4" class="screen_preview">
              <div class="fourth_preview">
                <div class="video_screen">
                  <div>视频区</div>
                </div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
                <div class="images_screen">图片区</div>
              </div>
              <el-radio :label="4" disabled>四屏</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('screen.videoRatio')+' :'">
          <span>{{ temp.video_ratio }}</span>
        </el-form-item>
        <el-form-item v-if="temp.video_px" :label="$t('screen.videoPx')+' :'">
          <span>{{ temp.video_px }}</span>
        </el-form-item>
        <template v-if="temp.type !== 1 && temp.type !== ''">
          <el-form-item :label="$t('screen.pictureRatio')+' :'">
            <span>{{ temp.picture_ratio }}</span>
          </el-form-item>
          <el-form-item v-if="temp.picture_px" :label="$t('screen.picturePx')+' :'">
            <span>{{ temp.picture_px }}</span>
          </el-form-item>
        </template>
        <el-form-item :label="$t('public.status')+' :'">
          <span>{{ statusEstimation(temp.check_status) }}</span>
        </el-form-item>
        <el-form-item v-if="temp.check_status === 3" :label="$t('public.auditOpinion')+' :'">
          <span>{{ temp.check_remark }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 视频预览 -->
    <el-dialog
      ref="video"
      title="视频源"
      :model="temp"
      :visible.sync="visibleVideo"
      width="30%"
      :before-close="beforeVideoClose"
    >
      <video-contorl :width="video_ratio_width" :height="video_ratio_height" :sources="sources"></video-contorl>
    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog ref="picture" title="图片源" :model="temp" :visible.sync="visiblePicture" width="30%">
      <image-contorl
        :width="picture_ratio_width"
        :height="picture_ratio_height"
        :imageUrl="imageSrc"
      ></image-contorl>
      <!-- <video-contorl :width="video_ratio_width" :height="video_ratio_height" :sources="sources"></video-contorl> -->
    </el-dialog>
  </div>
</template>

<script>
import video from "@/views/player/videoPreview"; // 视频控件
import imagePlayer from "@/views/player/imagePreview"; // 图片预览控件

export default {
  name: "EquipmentScreen",
  components: {
    "video-contorl": video,
    "image-contorl": imagePlayer
  },
  data() {
    const videoRatio = (rule, value, callback) => {
      if (this.videoRatio) {
        callback();
      } else {
        callback(new Error("请填写视频区屏幕比例！"));
      }
    };
    const pictureRatio = (rule, value, callback) => {
      if (this.pictureRatio) {
        callback();
      } else {
        callback(new Error("请填写视频区屏幕比例！"));
      }
    };
    return {
      sources: [
        {
          src:
            "http://aiadvertise.oss-cn-hangzhou.aliyuncs.com/VIDEO2019091911051D75C0.mp4",
          type: "video/mp4"
        }
      ],
      imageSrc:
        "http://aiadvertise.oss-cn-hangzhou.aliyuncs.com/VIDEO20190923052413C8E5.jpg",
      visibleVideo: false,
      loading: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      screenTypeOptions: [
        {
          value: 1,
          label: "单屏"
        },
        {
          value: 2,
          label: "双屏"
        },
        {
          value: 3,
          label: "三屏"
        },
        {
          value: 4,
          label: "四屏"
        }
      ],
      checkStatusOptions: [
        {
          value: 1,
          label: "审核中"
        },
        {
          value: 2,
          label: "审核通过"
        },
        {
          value: 3,
          label: "未通过"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        region_name: "",
        type: "",
        equipment_type: ""
      },
      temp: {
        id: undefined,
        equipment_type: "",
        equipment_type_name: "",
        name: "",
        type: "",
        video_ratio: "",
        video_px: "",
        picture_ratio: "",
        picture_px: ""
      },
      video_ratio_width: undefined,
      video_ratio_height: undefined,
      picture_ratio_width: undefined,
      picture_ratio_height: undefined,
      sortTemp: {
        name: ""
      },
      dialogFormVisible: false,
      sortDataFormVisible: false,
      visiblePicture: false,
      dialogFormRead: false,
      dialogStatus: "",
      textMap: {
        update: "更新",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [
          { required: true, message: "请填写屏幕类型名称", trigger: "blur" }
        ],
        equipment_type: [
          { required: true, message: "请选择设备类型", trigger: "change" }
        ],
        videoRatio: [
          { required: true, trigger: "change", validator: videoRatio }
        ],
        pictureRatio: [
          { required: true, trigger: "change", validator: pictureRatio }
        ],
        type: [{ required: true, message: "请选择屏幕类型", trigger: "blur" }],
        check_status: [
          { required: true, message: "请审核", trigger: "change" }
        ],
        check_remark: [
          { required: true, message: "请填写审核意见", trigger: "change" }
        ]
      },
      sortRules: {
        name: [
          { required: true, message: "请填写设备类型名称", trigger: "blur" }
        ]
      },
      createDisabled: false,
      updateDisabled: false,
      reviewDisabled: false,
      createSortDisabled: false,
      permission: {
        add: false,
        del: false,
        review: false,
        update: false
      },
      sortList: [],
      name: "",
      areaOptions: [],
      areaCount: undefined,
      pageSize: 20,
      temptime: [{ start: "", end: "", value: "" }],
      dialogImageUrl: "",
      dialogVisible: false,
      pictureLoading: false,
      pictureLoading1: false,
      pictureLoading2: false
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.permission.del) {
        itemCount += 1;
      }
      if (this.permission.update) {
        itemCount += 1;
      }
      if (this.permission.review) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    },
    videoRatio: {
      get() {
        let video_ratio = "";
        if (this.video_ratio_width && this.video_ratio_height) {
          video_ratio = this.video_ratio_width + ":" + this.video_ratio_height;
        } else {
          video_ratio = "";
        }
        return video_ratio;
      },
      set(val) {
        const names = val.split(":");
        this.video_ratio_width = names[0];
        this.video_ratio_height = names[1];
      }
    },
    pictureRatio: {
      get() {
        let picture_ratio = "";
        if (this.picture_ratio_width && this.picture_ratio_height) {
          picture_ratio =
            this.picture_ratio_width + ":" + this.picture_ratio_height;
        } else {
          picture_ratio = "";
        }
        return picture_ratio;
      },
      set(val) {
        const names = val.split(":");
        this.picture_ratio_width = names[0];
        this.picture_ratio_height = names[1];
      }
    }
  },
  created() {
    if (this.$store.state.permission.jurisdiction === "*") {
      this.permission.add = true;
      this.permission.del = true;
      this.permission.update = true;
      this.permission.review = true;
      this.permission.addSort = true;
    } else {
      const jurisdiction = this.$store.state.permission.jurisdiction.split(",");
      jurisdiction.forEach(element => {
        const id = parseInt(element);
        if (id === 229) {
          this.permission.add = true;
        } else if (id === 232) {
          this.permission.del = true;
        } else if (id === 231) {
          this.permission.review = true;
        } else if (id === 230) {
          this.permission.update = true;
        } else if (id === 236) {
          this.permission.addSort = true;
        }
      });
    }
    this.getList();
    this.getSort();
  },
  methods: {
    getTempTime(start, end, value, idx) {
      this.temptime[idx].start = start;
      this.temptime[idx].end = end;
      this.temptime[idx].value = value;
    },
    reduceCount(start, end, value, idx) {
      this.temptime.splice(idx, 1);
    },
    getAreaList(pageNumber = 1, search = "") {
      this.getArea(pageNumber, search);
    },
    getAreaid(data) {
      if (data.length > 0) {
        this.temp.region_id = data[0].id;
        this.temp.region_name = data[0].name;
      } else {
        this.temp.region_id = undefined;
        this.temp.region_name = "";
      }
    },
    locationFilter(type) {
      this.listQuery.page = 1;
      this.listQuery.equipment_type = type;
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        name: "",
        region_name: "",
        equipment_type: ""
      };
      this.getList();
    },
    handleModifyStatus(row) {
      this.$confirm("此操作将永久删除该设备属性, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const equipmentDeletePath = {
            company: "STQ",
            api: "pc_EquipmentScreen_delete",
            version: "1.0",
            data: {
              id: row.id
            }
          };
          this.socketApi.sendSock(JSON.stringify(equipmentDeletePath), res => {
            if (res) {
              this.socketData(res);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleEqTypeCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.sortDataFormVisible = true;
      this.$nextTick(() => {
        this.$refs["sortDataForm"].clearValidate();
      });
    },
    handleUpdate(row) {
      // 打开编辑弹窗
      this.temp = Object.assign({}, row); // copy obj

      if (this.temp.video_ratio) {
        this.videoRatio = this.temp.video_ratio;
      }
      if (this.temp.picture_ratio) {
        this.pictureRatio = this.temp.picture_ratio;
      }

      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleReview(row) {
      // 打开审核弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "review";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormRead = true;
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        equipment_type: "",
        equipment_type_name: "",
        name: "",
        type: "",
        video_ratio: "",
        video_px: "",
        picture_ratio: "",
        picture_px: ""
      };
      this.video_ratio_width = undefined;
      this.video_ratio_height = undefined;
      this.picture_ratio_width = undefined;
      this.picture_ratio_height = undefined;
      this.sortTemp = {
        name: ""
      };
    },
    getSort() {
      const getClassifyListPath = {
        // 获取屏幕类型
        company: "STQ",
        api: "pc_equipmentType_index",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(getClassifyListPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page
      };
      if (this.listQuery.name) {
        data["name"] = this.listQuery.name;
      }
      if (this.listQuery.region_name) {
        data["region_name"] = this.listQuery.region_name;
      }
      if (this.listQuery.type) {
        data["type"] = this.listQuery.type;
      }
      if (this.listQuery.equipment_type) {
        data["equipment_type"] = this.listQuery.equipment_type;
      }
      if (this.listQuery.check_status) {
        data["check_status"] = this.listQuery.check_status;
      }
      const merchantCircleIndexPath = {
        // 获取商圈列表
        company: "STQ",
        api: "pc_EquipmentScreen_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(merchantCircleIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    createSortData() {
      // 添加设备分类
      this.$refs["sortDataForm"].validate(valid => {
        if (valid) {
          if (!this.createSortDisabled) {
            this.createSortDisabled = true;
            const data = {
              name: this.sortTemp.name
            };
            const merchantCircleSortAddPath = {
              company: "STQ",
              api: "pc_equipmentType_add",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(
              JSON.stringify(merchantCircleSortAddPath),
              res => {
                if (res) {
                  this.socketData(res);
                }
                setTimeout(() => {
                  this.createSortDisabled = false;
                }, 1000);
              }
            );
          }
        }
      });
    },
    createData() {
      // 添加设备属性
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.createDisabled) {
            this.createDisabled = true;

            let picture_ratio = "";
            if (this.temp.type !== 1) {
              picture_ratio = this.pictureRatio;
            }
            let picture_px = "";
            if (this.temp.type !== 1) {
              picture_px = this.temp.picture_px;
            }
            if (this.temp.equipment_type) {
              this.sortList.forEach(element => {
                if (element.id === this.temp.equipment_type) {
                  this.temp.equipment_name = element.name;
                }
              });
            }
            const data = {
              equipment_type: this.temp.equipment_type,
              equipment_type_name: this.temp.equipment_name,
              name: this.temp.name,
              type: this.temp.type,
              video_ratio: this.videoRatio,
              video_px: this.temp.video_px,
              picture_ratio: picture_ratio,
              picture_px: picture_px
            };

            const equipmentScreenAddPath = {
              company: "STQ",
              api: "pc_EquipmentScreen_add",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(
              JSON.stringify(equipmentScreenAddPath),
              res => {
                if (res) {
                  this.socketData(res);
                }
                setTimeout(() => {
                  this.createDisabled = false;
                }, 1000);
              }
            );
          }
        }
      });
    },
    updateData() {
      // 更新设备属性
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.updateDisabled) {
            this.updateDisabled = true;

            let picture_ratio = "";
            if (this.temp.type !== 1) {
              picture_ratio = this.pictureRatio;
            }
            let picture_px = "";
            if (this.temp.type !== 1) {
              picture_px = this.temp.picture_px;
            }
            if (this.temp.equipment_type) {
              this.sortList.forEach(element => {
                if (element.id === this.temp.equipment_type) {
                  this.temp.equipment_name = element.name;
                }
              });
            }
            const data = {
              id: this.temp.id,
              equipment_type: this.temp.equipment_type,
              equipment_type_name: this.temp.equipment_name,
              name: this.temp.name,
              type: this.temp.type,
              video_ratio: this.videoRatio,
              video_px: this.temp.video_px,
              picture_ratio: picture_ratio,
              picture_px: picture_px
            };

            const equipmentScreenAddPath = {
              company: "STQ",
              api: "pc_EquipmentScreen_edit",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(
              JSON.stringify(equipmentScreenAddPath),
              res => {
                if (res) {
                  this.socketData(res);
                }
                setTimeout(() => {
                  this.updateDisabled = false;
                }, 1000);
              }
            );
          }
        }
      });
    },
    reviewData() {
      // 审核商圈信息
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.reviewDisabled) {
            this.reviewDisabled = true;
            const data = {
              id: this.temp.id,
              check_status: this.temp.check_status,
              check_remark: this.temp.check_remark
            };
            data["returnType"] = "review";
            const merchantCircleCheckPath = {
              company: "STQ",
              api: "pc_EquipmentScreen_check",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(
              JSON.stringify(merchantCircleCheckPath),
              res => {
                if (res) {
                  this.socketData(res);
                }
                setTimeout(() => {
                  this.reviewDisabled = false;
                }, 1000);
              }
            );
          }
        }
      });
    },
    getArea(pageNumber, search) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_region_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    updatePicture(element, name, loading) {
      this[loading] = true;
      const video = new FormData();
      video.append("video", element.file);
      const index = element.file.name.lastIndexOf(".");
      const suffix = element.file.name.substr(index + 1).toLowerCase();
      if (this.imageFile.indexOf(suffix) !== -1) {
        this.updateFile(video, result => {
          if (result.data.code === 0) {
            this.$message.error(result.data.message);
          } else {
            this.temp[name] = result.data.data.video_url;
          }
          this[loading] = false;
        });
      } else {
        this.$message.error("请上传图片文件");
        this[loading] = false;
        return false;
      }
    },
    changPicture(name) {
      this.$confirm("是否删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const index = this.temp[name].lastIndexOf("/");
          const str = this.temp[name].substring(
            index + 1,
            this.temp[name].length
          );
          const video_name = { video_name: str };
          this.deleteFile(video_name, result => {
            if (result.data.code === 0) {
              this.$message.error(result.data.message);
            } else {
              this.temp[name] = "";
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_EquipmentScreen_index") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "pc_equipmentType_index") {
            this.sortList = resj.data;
          } else if (resj.api === "pc_equipmentType_add") {
            this.sortDataFormVisible = false;
            this.getSort();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_EquipmentScreen_add") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_EquipmentScreen_edit") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "编辑成功",
              type: "success",
              duration: 2000
            });
          } else if (
            resj.api === "pc_EquipmentScreen_check" &&
            resj.type === "review"
          ) {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "审核成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_EquipmentScreen_delete") {
            this.getList();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          }
        }
      }
    },
    getScreenType(type) {
      switch (parseInt(type)) {
        case 1:
          return "单屏";
        case 2:
          return "双屏";
        case 3:
          return "三屏";
        case 4:
          return "四屏";
        default:
          return type;
      }
    },
    equipmentTypeES(type) {
      let equipmentTypeName = "";
      this.sortList.forEach(element => {
        if (element.id === parseInt(type)) {
          equipmentTypeName = element.name;
        }
      });
      return equipmentTypeName;
    },
    drop(event) {
      event.preventDefault();
    },
    // 视频预览
    previewVideoRatio() {
      this.visibleVideo = true;
    },
    // 图片预览
    previewPictureRatio() {
      this.visiblePicture = true;
    },
    // 视频预览窗口关闭
    beforeVideoClose(done) {
      done();
    }
  }
};
</script>
<style scoped>
.screen_preview {
  display: inline-block;
  text-align: center;
  padding-right: 5px;
}
.screen_preview {
  font-size: 16px;
}
.screen_preview .first_screen,
.screen_preview .second_screen {
  border: 1px solid #dcdfe6;
  width: 200px;
  height: 150px;
}
.screen_preview .second_screen .video_screen {
  height: 70%;
}
.screen_preview .second_screen .images_screen {
  height: 30%;
}
.screen_preview .first_screen {
  vertical-align: middle;
  display: table-cell;
}
.screen_preview .third_preview,
.screen_preview .fourth_preview {
  border: 1px solid #dcdfe6;
  width: 200px;
  height: 200px;
}
.screen_preview .el-radio {
  padding: 5px 0px;
}
.second_screen .video_screen {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.second_screen .images_screen {
  border-top: 1px solid #dcdfe6;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.third_preview .video_screen {
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.third_preview .images_screen {
  border-top: 1px solid #dcdfe6;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  float: left;
}
.third_preview .images_screen:last-child {
  border-left: 1px solid #dcdfe6;
}
.fourth_preview .video_screen {
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fourth_preview .images_screen {
  border-top: 1px solid #dcdfe6;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
